<script setup lang="ts">
import u2341 from '@/assets/u2341.png'
import u2345 from '@/assets/u2345.png'
import u2349 from '@/assets/u2349.png'
import u2353 from '@/assets/u2353.png'
import u2357 from '@/assets/u2357.png'
import u2361 from '@/assets/u2361.png'
import u2365 from '@/assets/u2365.png'
import u2369 from '@/assets/u2369.png'
import u2373 from '@/assets/u2373.png'
import u2377 from '@/assets/u2377.png'
import u2385 from '@/assets/u2385.png'
import { ref } from 'vue'

const statisticslist = [
    {
        title: '水表总数',
        num: 28009,
        count: '+0.1%'
    },
    {
        title: '新立户数',
        num: 39,
        count: '-1.2%'
    },
    {
        title: '销户数',
        num: 91,
        count: '+0.5%'
    },
    {
        title: '换表数',
        num: 103,
        count: '+5%'
    },
    {
        title: '派工数',
        num: 163,
        count: '-1.9%'
    },
    {
        title: '实收',
        num: 117114,
        count: '+5%'
    },
    {
        title: '银行卡',
        num: 45023,
        count: '+2%'
    },
    {
        title: '现金',
        num: 5021,
        count: '-2%'
    },
    {
        title: '微信',
        num: 39537,
        count: '+5%'
    },
    {
        title: '支付宝',
        num: 27563,
        count: '-0.3%'
    },
]

const businesslist = [
    {
        image:u2341,
        text:'收费管理'
    },
    {
        image:u2345,
        text:'抄表管理'
    },
    {
        image:u2349,
        text:'水表管理'
    },
    {
        image:u2353,
        text:'账单管理'
    },
    {
        image:u2357,
        text:'票务管理'
    },
    {
        image:u2361,
        text:'报装管理'
    },
    {
        image:u2365,
        text:'业务工单'
    },
    {
        image:u2369,
        text:'收费管理'
    },
    {
        image:u2373,
        text:'用户管理'
    },
    {
        image:u2377,
        text:'银行代码维护'
    },
    {
        image:u2345,
        text:'水表调价'
    },
    {
        image:u2385,
        text:'营业区域设置'
    },
   
]

const value1 = ref('')
const value = ref('')
const options = ref('')
</script>

<template>
    <div class="container">

        <div class="header titlebox">
            <h1>统计筛选</h1>
            <div class="header-input">
                <div class="demo-date-picker magright">
                    <div class="block">
                        <el-date-picker v-model="value1" type="date" placeholder="选择日期" />
                    </div>
                </div>

                <el-select class="magright" v-model="value" placeholder="选择区域" style="width: 240px">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
                <el-select class="magright" v-model="value" placeholder="选择来源" style="width: 240px">
                    <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>

                <el-time-picker class="magright" v-model="value1" placeholder="选择时间" />
            </div>

        </div>


        <div class="titlebox">
            <h1>统计分析</h1>
            <div class="cardbox ">

                <div class="card" v-for="item in statisticslist">
                    <p>
                        <span>{{ item.title }}</span>
                        <span></span>
                    </p>
                    <p class="num">{{ item.num }}</p>
                    <p>{{ item.count }}</p>
                    <el-progress :percentage="50" />
                </div>
            </div>
        </div>


        
        <div class="titlebox">
            <h1>营业收费管理</h1>
            <div class="businessbox ">
                <div class="businesscard" v-for="item in businesslist">
                    <el-image :src="item.image"></el-image>
                    <p>
                        {{ item.text }}
                    </p>
                   
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped tang="scss">
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.titlebox {
    /* padding: 20px; */
    margin-bottom: 10px;
    background-color: #fff;
    padding: 20px;
    h1 {
        color: #343434;
        font-size: 15px;
        font-weight: 700;
        margin-bottom: 10px;
    }
}

.header-input {
    display: flex;
    /* justify-content: space-evenly; */
    align-items: center;
    .magright {
        margin-right: 20px;
    }
}

.cardbox {
 
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.card {
    padding: 20px;
    width: 20%;
    border: 0.25px solid #e9e9e9;
    /* height: 300px; */
    background-color: #fff;

    p {
        margin-bottom: 10px;
        color: #7a7a7a;
    }

    .num {
        font-size: 30px;
        color: #343434;
    }

    .el-progress {
        justify-content: space-between;
    }

}

.businessbox {
    /* width: 16%; */
    padding: 20px;
    display: flex;
    /* flex-direction:row; */
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;

}

.businesscard {
    width: 16%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    .el-image {
        margin-bottom: 10px;
    }
}
</style>